<template>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="角色ID" prop="roleId">
        <el-select v-model="ruleForm.roleId" placeholder="--请选择--">
          <el-option label="--请选择--" value="--请选择--" />
          <el-option label="爸爸" value="1" />
          <el-option label="妈妈" value="2" />
        </el-select>
      </el-form-item>
  
      <el-form-item label="部门ID" prop="departmentId">
        <el-select v-model="ruleForm.departmentId" placeholder="--请选择--">
          <el-option label="--请选择--" value="--请选择--" />
          <el-option label="纪检部" value="1" />
          <el-option label="人事部" value="2" />
          <el-option label="财务部" value="3" />
        </el-select>
      </el-form-item>
  
      <el-form-item label="登陆账号" prop="accountName">
        <el-input v-model="ruleForm.accountName" />
      </el-form-item>
  
      <el-form-item label="密码" prop="accountPass">
        <el-input v-model="ruleForm.accountPass" />
      </el-form-item>
  
      <el-form-item label="真实姓名" prop="realName">
        <el-input v-model="ruleForm.realName" />
       
      </el-form-item>
  
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="ruleForm.phone" />
      </el-form-item>
  
      <el-form-item label="身份证号" prop="idCard">
        <el-input v-model="ruleForm.idCard" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          新增
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import type { ComponentSize, FormInstance, FormRules } from 'element-plus';
  import axios from 'axios';
  
  import { useRoute, useRouter } from 'vue-router';
  
  const route = useRoute();
  const router = useRouter();
  import { ElMessage, ElMessageBox } from 'element-plus';
  
  interface RuleForm {
    accountName: string,
  accountPass: string,
  realName: string,
  phone: string,
  idCard: string,
  roleId: number,
  departmentId: number
  }
  
  const formSize = ref<ComponentSize>('default');
  const ruleFormRef = ref<FormInstance>();
  const ruleForm = reactive<RuleForm>({
    accountName: '',
    accountPass:   '',
    realName:   '',
    phone: '',
    idCard:   '',
    roleId: 0,
    departmentId: 0
  });
  
  const locationOptions = ['Home', 'Company', 'School'];
  
  const rules = reactive<FormRules<RuleForm>>({
    accountName: [
      { required: true, message: '用户名不能为空', trigger: 'blur' },
      
    ],
    accountPass: [
      {
        required: true,
        message: '密码不能为空',
        trigger: 'change'
      }
    ],
    realName: [
      {
        required: true,
        message: '真实姓名不能为空',
        trigger: 'change'
      }
    ],
    phone: [
      {
       
        required: true,
        message: '手机号不能为空',
        trigger: 'change'
      }
    ],
   
   
  });
  
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log('submit!');
        axios({
  
          url:'https://localhost:7068/api/Account/CreateAccount',
          method:'post',
          data:ruleForm
        }).then((res)=>{
  
          console.log(res)
          if(res.data.code==202){
  
            ElMessage.success("添加成功!");
            router.push("/");
          }
          else{
  
            ElMessage.error("添加失败");
          }
        })
      } else {
        console.log('error submit!', fields);
      }
    });
  };
  
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
  };
  
  const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`
  }));
  </script>
  